<!--
 * @Description: 虚拟身份_关系人信息_通联关系图
 -->
<template>
  <div id="chart" style="height: 600px;">
    <h2 class="font-gray" style="text-align: center; margin-top: 100px;">正在查询中，请耐心等待2分钟~~</h2>
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'

let EC = null
let nodes = []
let links = []

export default {
  mounted() {
    if (this.phone) {
      this.$nextTick(() => {
        this.getList()
      })
    }
  },
  props: {
    // 手机号码
    phone: {
      type: [String, Number]
    }
  },
  watch: {
    phone(value) {
      this.$nextTick(() => {
        // document.getElementById('chart').innerHTML = '<h2 class="font-gray" style="text-align: center; margin-top: 100px;">正在查询中，请耐心等待2分钟~~</h2>'
        this.getList()
      })
    }
  },
  methods: {
    getList() {
      const phone = this.phone
      console.log(phone)
      alarmServiceApi.getPortraitCommonRecordDiagram({ phone: phone, taskId: this.$route.query.taskId }).then(res => {
        if (res.success) {
          const res1 = {
            success: true,
            message: '查询成功',
            code: 200,
            result: [
              {
                phone: '8617608916988',
                count: 5,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8615508914259',
                count: 5,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8613337555129',
                count: 5,
                isSeedNumber: 0,
                childNode: [
                  {
                    phone: '8613078928687',
                    count: 19,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8617788436123',
                    count: 8,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618289770855',
                    count: 3,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618588564976',
                    count: 5,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8613337555039',
                    count: 15,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8617330939396',
                    count: 17,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8613337553639',
                    count: 5,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8615771386309',
                    count: 2,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618976746860',
                    count: 3,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8617589126110',
                    count: 4,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8617789824354',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8613337630012',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618089789789',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8619989722913',
                    count: 2,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8613398979969',
                    count: 2,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618976751496',
                    count: 3,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618907593677',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8617700911378',
                    count: 2,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8613379930069',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8618976162866',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  },
                  {
                    phone: '8613005021376',
                    count: 1,
                    isSeedNumber: 0,
                    childNode: []
                  }
                ]
              },
              {
                phone: '8617789896569',
                count: 1,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8615008045367',
                count: 2,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8619989821568',
                count: 2,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8615308979134',
                count: 1,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8615011393639',
                count: 1,
                isSeedNumber: 0,
                childNode: []
              },
              {
                phone: '8618976064511',
                count: 1,
                isSeedNumber: 0,
                childNode: []
              },
              { phone: '8613322020281', count: 1, isSeedNumber: 0, childNode: [] }
            ],
            timestamp: 1653466084392
          }

          const data = res.result
          console.log(data)
          const reg = /疑似吸毒/
          nodes = [
            {
              category: 0,
              name: phone,
              phone: phone,
              value: 0,
              symbolSize: 16,
              itemStyle: {
                normal: {
                  // color: '#1890FF'
                }
              }
            }
          ]

          data.forEach(item => {
            const isSeedNumber = item.isSeedNumber === 1 ? 3 : 1
            const isSeedNumberTxt = item.isSeedNumber === 1 ? '种子号码' : '一级通联'
            nodes.push({
              category: isSeedNumber, //1,
              name: item.phone + '_' + isSeedNumber,
              value: item.count,
              symbolSize: 13,
              itemStyle: {
                normal: {
                  color: reg.test(item.personLabels) ? '#fc4d42' : null
                }
              }
            })

            links.push({
              source: item.phone + '_' + isSeedNumber,
              target: phone,
              weight: 1,
              name: isSeedNumberTxt //'一级通联'
            })

            if (item.childNode) {
              item.childNode.forEach(subItem => {
                const subIsSeedNumber = subItem.isSeedNumber === 1 ? 3 : 2
                const subISeedNumberTxt = subItem.isSeedNumber === 1 ? '种子号码' : '二级通联'
                nodes.push({
                  category: subIsSeedNumber, //2,
                  name: subItem.phone + '_' + subIsSeedNumber,
                  value: subItem.count,
                  symbolSize: 10,
                  itemStyle: {
                    normal: {
                      color: reg.test(subItem.personLabels) ? '#fc4d42' : null
                    }
                  }
                })

                links.push({
                  source: subItem.phone + '_' + subIsSeedNumber,
                  target: item.phone + '_' + isSeedNumber,
                  weight: 1,
                  name: subISeedNumberTxt //'二级通联'
                })
              })
            }
          })
          nodes = this.quchong(nodes)
          this.createGraph()
        }
      })
    },
    createGraph() {
      const categoryArray = [{ name: '核心人物' }, { name: '一级通联' }, { name: '二级通联' }, { name: '种子号码' }]
      let jsondata = {
        categories: categoryArray,
        nodes: nodes,
        links: links
      }

      EC = this.$echarts.init(document.getElementById('chart'))
      setTimeout(() => {
        let option = this.getOption(jsondata)
        EC.setOption(option)
      }, 500)
      // 设置option样式
    },
    getOption(graphInfo) {
      console.log(graphInfo)
      let option = {
        legend: {
          data: ['核心人物', '一级通联', '二级通联', '种子号码'],
          left: 0
        },
        color: ['#eb7e39', '#50a4ab', '#6766b8', '#92939d'],
        tooltip: {
          formatter: data => {
            let str = ''
            if (data.dataType === 'node') {
              const name = data.name.indexOf('_') >= 0 ? data.name.substring(0, data.name.indexOf('_')) : data.name
              str = `电话：${name} 通联：${data.value}次`
              // str = `电话：${data.name} 通联：${data.value}次`
            } else {
              const source =
                data.data.source.indexOf('_') >= 0
                  ? data.data.source.substring(0, data.data.source.indexOf('_'))
                  : data.data.source
              const target =
                data.data.target.indexOf('_') >= 0
                  ? data.data.target.substring(0, data.data.target.indexOf('_'))
                  : data.data.target
              str = `${source} 与 ${target} 通联`
              // str = `${data.data.source} 与 ${data.data.target} 通联`
            }
            return str
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            roam: true, // 如果为False 则禁用放大和缩小功能，true为打开
            animation: false,
            label: false,
            draggable: false,
            data: graphInfo.nodes,
            categories: graphInfo.categories,
            force: {
              // edgeLength: 5,
              // repulsion: 20,
              // gravity: 0.2
              edgeLength: 80,
              repulsion: 500,
              gravity: 0.6
              // layoutAnimation: true
            },
            edges: graphInfo.links
          }
        ]
      }

      return option
    },
    quchong(data) {
      let arr = []
      for (let i = 0, len = data.length; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (data[i].name === data[j].name) {
            break
          }
          if (j === len - 1) {
            arr.push(data[i])
          }
        }
        if (i === len - 1) {
          arr.push(data[i])
        }
      }
      return arr
    }
  }
}
</script>
<style lang="less"></style>
